<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #eee;
      }
      .main {
        width: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
      p {
        color: pink;
        font-size: 50px;
        font-weight: 200;
        text-align: center;
      }
      .container,
      li {
        background-color: white;
        height: 30px;
        line-height: 30px;
        color: #444;
        border-bottom: solid 1px #ddd;
      }
      .container {
        display: flex;
      }
      li {
        list-style: none;
        padding-left: 40px;
      }
      li span {
        color: red;
      }
      li div {
        color: red;
        float: right;
        cursor: pointer;
        display: block;
        width: 30px;
        height: 30px;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
      }
      svg {
        margin: 5px 10px;
        width: 20px;
        height: 20px;
        color: red;
      }
      .input {
        width: calc(100% - 40px);
        border: none;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <p>todos</p>
      <div class="container">
        <svg
          t="1661255975598"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2441"
          width="200"
          height="200"
        >
          <path
            d="M512.726547 675.318646c-8.063653 0-15.790638-3.245927-21.435195-9.006118L231.175103 400.906809c-11.603269-11.837606-11.410887-30.840402 0.427742-42.442648 11.837606-11.601222 30.841426-11.410887 42.442648 0.427742l238.681054 243.534596L751.407602 358.891903c11.601222-11.839653 30.602995-12.033058 42.442648-0.427742 11.839653 11.603269 12.031011 30.605042 0.427742 42.442648L534.161742 666.312528C528.517185 672.072719 520.791224 675.318646 512.726547 675.318646z"
            fill="#ccc"
            p-id="2442"
          ></path>
        </svg>
        <div class="input" contenteditable=""></div>
      </div>
      <ul></ul>
    </div>
    <script>
      let arr = []
      let filter = []
      const input = document.querySelector('.input')
      const ul = document.querySelector('ul')
      input.addEventListener('keyup', (e) => {
        let txt = getTxt()
        if (e.key == 'Enter' || e.keyCode == 13) {
          input.innerText = ''
          arr.push({ txt })
          changeList('')
        } else {
          changeList(txt)
        }
      })
      ul.addEventListener('click', (e) => {
        if (e.target.tagName === 'DIV') {
          let node = e.target.parentNode
          let i = [...ul.childNodes].indexOf(node)
          let obj = filter[i]
          filter.splice(i, 1)
          arr.splice(arr.indexOf(obj), 1)
          changeList(getTxt())
        }
      })
      function changeList(txt) {
        filter = arr.filter((val) => val.txt.includes(txt))
        let str = ''
        for (let i = 0; i < filter.length; i++) {
          let s = filter[i].txt.replace(txt, `<span>${txt}</span>`)
          str += `<li>${s}<div>×</div></li>`
        }
        ul.innerHTML = str
      }
      function getTxt() {
        return input.innerText.replace('\n', '').replace('<', '&lt;').replace('>', '&gt;')
      }
    </script>
  </body>
</html>
